iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

白話JavaScript系列 第 14

Day14-This

  • 分享至 

  • xImage
  •  
  • this的指向取決於誰呼叫
  • 物件一定指向本身
  • 其餘必須透過call、bind等等強制綁定

我們先把this打印出來,可以發現this指向window

console.log(this)

https://ithelp.ithome.com.tw/upload/images/20210914/20130419Z9EJaxsHd8.png

我們宣告一個全域變數a

var a = 3
console.log(this);

https://ithelp.ithome.com.tw/upload/images/20210914/20130419MWzpv2F6bR.png

可以看到在window底下會有剛剛我們宣告的變數a

那如果是let、const呢 ?

let a = 3
console.log(this);

const a = 3
console.log(this);

let 、const 不同於var會使window底下有全域變數。

我們也可以換個思維,既然知道const、let是block scope,也就代表不會汙染window!!!

https://ithelp.ithome.com.tw/upload/images/20210914/20130419Ry7CDppsDh.png

物件

var value = 3

var obj = {
  value : 2,
  log : function() {
    console.log(this)
  }
}
obj.log()

https://ithelp.ithome.com.tw/upload/images/20210914/201304191QFEMQCAXQ.png

我們如果把obj2的log指向obj的log

var value = 3

var obj = {
  value : 2,
  log : function() {
    console.log(this)
  }
}
var obj2 = {
  value: 100,
  log: obj.log //point to obj2
}
obj2.log()

https://ithelp.ithome.com.tw/upload/images/20210914/20130419HWFJSVS8B1.png

沒錯! 取決於誰呼叫誰

Call

當然也有apply、bind等等,這邊我們舉call的例子即可,都大同小異。

var name = 'Ian'
function sayHi() {
  console.log(this.name)
}
sayHi() //Ian
sayHi.call({name: 'Dennis'})

Arrow Function

匿名箭頭並不會綁定於該物件上。

obj = {
  log: () => console.log(this)
}
obj.log() //window

但我們如果使用閉包的寫法呢???

obj = {
  value: '3',
  log: function() {
     setTimeout(() => console.log(this))
  }
}
obj.log() //{value: '3', log: ƒ}

上一篇
Day13-Async && Await
下一篇
Day15-ProtoType
系列文
白話JavaScript28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言